<ion-header>
  <ion-navbar>
    <ion-buttons start>
      <button ion-button (click)="dismissCLI()">
        <img src="assets/img/back.png" width='15' height='20'>
      </button>
    </ion-buttons>
    <ion-title style="color: black;">美图描述</ion-title>
    <ion-buttons end>
      <button ion-button icon-only style="margin-right: 5px;" (click)="uploadNailStyleFromArtistAPI()">
        <span style="color: red;">确定</span>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content padding style="border:1px solid #000">
  <!-- <div class="imgs"> -->
  <!-- <div class="img" (click)="uploadPic()"> -->
  <!-- <img style="width:100%;height:100%" [src]="picture+serve1" alt=""> -->
  <!-- <img src="{{picture}}{{returnImg}}" style="width: 100%" alt="" *ngIf="returnImg != undefined"> -->
  <!-- <page-select-picture [max]="1" [imgpath]="imgpathlogo" [classname]="logoclass" [fileObjList]='fileObjList' (fileObjListChange)="returnapiimg($event)"></page-select-picture> -->
  <!-- </div> -->

  <ion-item class="imgfiles">
    <span *ngFor="let item of imgarr;let i=index;" class="size">
      <img src="{{picture}}{{item}}" alt="">
      <span (tap)="delImg(item,i)" class="delet">
        <img src="assets/img/ios/guanbi--@2x.png" alt="">

      </span>
    </span>
    <!-- <img src="assets/img/picbj.png" width="90" height="90" /> -->
    <ion-col style="position:relative;" *ngIf="!showSelect">
      <img width="90" height="90" src="assets/img/picbj.png" style="top:0;left:0;">
      <page-select-picture style="position:absolute;opacity:0;left:5px;" [max]="1" [classname]="circle1Class" [fileObjList]='fileObjList'
        (fileObjListChange)="returnapiimg($event)"></page-select-picture>
    </ion-col>
    <p class="bgionc">
      <span class="myshow">( 请上传1-3张美图 )</span>
    </p>

  </ion-item>

  <div class="updataDetail">
    <ion-list>

      <ion-item>
        <ion-input type="text" placeholder="美图名称" [(ngModel)]="updataImgObj.nail_name"></ion-input>
      </ion-item>

      <ion-item>
        <ion-input type="text" placeholder="耗时:以保持小时为单位" [(ngModel)]="updataImgObj.nail_consuming_time"></ion-input>
      </ion-item>
      <ion-item>
        <ion-input placeholder="保持时长: 保持天数以天为单位" type="text" [(ngModel)]="updataImgObj.nail_hold_time"></ion-input>
      </ion-item>

      <ion-item (click)="select()">
        <div class="fontSize" *ngIf="updataImgObj.nail_tools.length == 0">使用工具</div>
        <ion-label *ngIf="updataImgObj.nail_tools.length !== 0" class="fontSize">{{'#'+updataImgObj.nail_tools.join(' #')}}</ion-label>
      </ion-item>
      <!-- <div *ngIf="select">
        <ion-item (click)="select=!select;selectedTool = tool" *ngFor="let tool of toolss">{{tool}}</ion-item>
      </div> -->

      <ion-item (click)="selectM()">

        <!-- <ion-input type="text" [(ngModel)]="updataImgObj.nail_materials"></ion-input> -->
        <div class="fontSize" *ngIf="updataImgObj.nail_materials.length == 0">使用材料</div>
        <ion-label class="fontSize" *ngIf="updataImgObj.nail_materials.length !== 0">{{'#'+updataImgObj.nail_materials.join(' #')}}</ion-label>
      </ion-item>
      <!-- <div *ngIf="select2">
        <ion-item (click)="select2=!select2;selectedMaterial = material" *ngFor="let material of materials">{{material}}</ion-item>
      </div> -->
      <ion-item>
        <div *ngIf="updataImgObj.applicable_scene == ''">适用场景</div>
        <ion-input type="text" placeholder="适用场景" [(ngModel)]="updataImgObj.applicable_scene"></ion-input>
      </ion-item>
      <!-- <ion-item>
        <ion-label>创意理念</ion-label>
        <ion-input type="text"  [(ngModel)]="updataImgObj.nail_desc" ></ion-input>
      </ion-item> -->
      <ion-item>
        <div *ngIf="updataImgObj.nail_desc== ''">适用场景</div>
        <ion-textarea style="font-size: 1.3rem;padding-top: 0.6rem;" [(ngModel)]="updataImgObj.nail_desc" minlength="5" maxlength="100"
          value="Text Area " placeholder="创意理念"></ion-textarea>
      </ion-item>

    </ion-list>
  </div>
  <div class="foot">
    <div class="label">
      <ion-list>
        <div class="label" *ngIf="slide==true">
          (右滑选择标签)
        </div>
        <ion-item class="flex-center">
          <span class="fontSize" *ngFor="let item of fullPushh" style="margin-right:0.6rem">#{{item.type_name+" "}}</span>
        </ion-item>
      </ion-list>

    </div>
    <div class="btn fontSize" (click)="detail()">4个标签</div>
  </div>
</ion-content>


<ion-menu id="isDetail2" type="overlay" _ [content]="container" side="left">
  <ion-content>
    <ion-row class="bottom">
      <ion-col col-6 class="button red">
        <div class="btn2 buttonColor1" (click)="allbac()">
          取消
        </div>
      </ion-col>
      <ion-col col-6 class="button ">
        <div class="btn2 buttonColor2" (click)="ok()">
          完成
        </div>
      </ion-col>
    </ion-row>
    <div class="detail" style="margin-top:5rem">
      <div>
        <span>流行新款</span>
        <br>
        <div class="cont2d">
          <div [ngClass]='{"btnsd":true,"active1":type.isCheck}' (click)="stylee(i)" *ngFor="let type of types2; let i = index">
            {{type.type_name}}
            <img class="rem1d" *ngIf='type.isCheck' (click)="remm1(i)" src="assets/img/ios/guanbi@3x.png">
          </div>
        </div>
      </div>
      <hr>
      <div>
        <span>手法</span>
        <br>
        <div class="cont2d">
          <div [ngClass]='{"btnsd":true,"active2":hand.isCheck}' (click)="stylee1(i)" *ngFor="let hand of hands2, let i = index">{{hand.type_name}}
            <img class="rem2d" *ngIf='hand.isCheck' (click)="remm2(i)" src="assets/img/ios/guanbi@3x.png">
          </div>
        </div>
      </div>
      <hr>
    </div>
  </ion-content>
</ion-menu>

<!-- 选择工具 -->
<ion-menu id="isDetail4" type="overlay" _ [content]="container" side="right">
  <ion-content>
    <ion-row class="bottom">
      <ion-col col-6 class="button red">
        <div class="btn2  buttonColor1" (click)="allbacTool()">
          重置
        </div>
      </ion-col>
      <ion-col col-6 class="button ">
        <div class="btn2  buttonColor2" (click)="okTool()">
          完成
        </div>
      </ion-col>
    </ion-row>
    <div class="detail" style="margin-top:5rem">
      <div>
        <span>工具</span>
        <br>

        <div class="cont2d">
          <div [class.active1]="active[i]" class="btns1d" (click)="selectTool(i)" *ngFor="let tool of selectTools;let i = index">
            {{tool}}
            <img *ngIf="active[i]" class="rem1d" src="assets/img/ios/guanbi@3x.png">
          </div>
        </div>

      </div>

      <textarea placeholder="其他:" class="btns1d textSize" value="其他" [(ngModel)]="orderTool"> {{orderTool}}</textarea>



    </div>
  </ion-content>
</ion-menu>

<!-- 选择材料 -->
<ion-menu id="isDetail3" type="overlay" _ [content]="container" side="right">
  <ion-content>
    <ion-row class="bottom">
      <ion-col col-6 class="button red">
        <div class="btn2  buttonColor1" (click)="allbacMaterials()">
          重置
        </div>
      </ion-col>
      <ion-col col-6 class="button ">
        <div class="btn2  buttonColor2" (click)="okMaterials()">
          完成
        </div>
      </ion-col>
    </ion-row>
    <div class="detail" style="margin-top:5rem">
      <div>
        <span>材料</span>
        <br>

        <div class="cont2d">
          <div [class.active1]="activeM[i]" class="btns1d" *ngFor="let Materials of selectMaterialss;let i = index" (click)="selectMaterials(i)">
            {{Materials}}
            <img *ngIf="activeM[i]" class="rem1d" src="assets/img/ios/guanbi@3x.png">
          </div>
        </div>

      </div>


      <textarea placeholder="其他:" class="btns1d textSize" value="其他" [(ngModel)]="orderMaterials"></textarea>
    </div>
  </ion-content>
</ion-menu>

<ion-content #container has-header>
  <ion-nav [root]="contentArea" #content swipeBackEnabled="false"></ion-nav>
</ion-content>